{/*

    ==element图标选择器Vue组件==

*/}

<script type="text/html" id="vue--icon-selector">
    <el-popover
            ref="popover"
            :width="600"
            v-model:visible="pv"
            trigger="click"
            placement="bottom-start"
    >
        <template #reference>
            <el-input v-model="iconv" style="width: 300px" placeholder="选择图标" clearable>
                <template #prefix>
                    <el-icon class="el-input__icon"><component v-if="iconv" :is="iconv"></component></el-icon>
                </template>
            </el-input>
        </template>
        <el-scrollbar max-height="350px">
            <el-space v-for="ic in icons" >
                <div class="icon-select-box" @click.stop="selected(ic.value)" style="width: 100px;text-align: center;margin-bottom: 3px;">
                    <div style="font-size: 20px"><el-icon><component :is="ic.value"></component></el-icon></div>
                    <el-text class="mx-1" type="info" size="small">{{ ic.value }}</el-text>
                </div>
            </el-space>
        </el-scrollbar>
    </el-popover>

</script>
<style>
    .icon-select-box:hover{
        background-color: #eeeeeeee;
        cursor: pointer;
    }
</style>
<script>
    VueInit.components.IconSelector = {
        template:document.getElementById('vue--icon-selector').innerHTML,
        props: ['modelValue'],
        emits: ['update:modelValue'],
        data(){
            let icons = [];
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                icons.push({ value: key })
            }
            return {
                icons: icons,
                iconv: this.modelValue,
                pv:false
            }
        },
        methods:{
            selected(value){
                this.iconv = value;
                this.pv = false;
                this.$emit('update:modelValue', this.iconv);
            }
        }
    };

</script>